<!--
* @fileName anttable.vue
* @author caoke
* @date 2022/12/05 14:06:05
* @version V1.0.0
* @description 
!-->
<template>
  <div class="page-container">
    <div class="form-container">
      <a-form-model ref="form" :model="form" layout="inline">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="企业名称">
              <a-input placeholder="请输入" v-model.trim="form.customerName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="企业名称">
              <a-input placeholder="请输入" v-model.trim="form.customerName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="企业名称">
              <a-input placeholder="请输入" v-model.trim="form.customerName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="企业名称">
              <a-input placeholder="请输入" v-model.trim="form.customerName" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <div class="main-container">
      <div class="btn-container">
        <a-button @click="handleAdd" v-has="'Manage:add'" type="primary" icon="plus">新增</a-button>
        <a-button type="primary" icon="download">导出清单</a-button>
      </div>
      <a-table bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="ipagination" :columns="columns" :data-source="data" @change="handleTableChange" />

    </div>

    <!-- <div >
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        Reload
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div> -->

  </div>
</template>

<script>
const columns = [
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}
export default {
  name: "",
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      form: {
        orgCode: "",
        customerCode: "",
        customerName: "",
      },
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        // hideDefaultSelections: true,
        selections: true,
        onSelection: this.onSelection,
      };
    },
  },
  created() {},
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      console.log("selectionRows changed: ", selectionRows);
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    handleTableChange(pagination) {
      this.ipagination = pagination;
    },
  },
};
</script>
<style lang='scss' scoped>
.page-container {
  background-color: #f0f2f5;
  padding: 8px;
  .form-container {
    background-color: #ffffff;
    padding: 8px;
    margin-bottom: 8px;
    .ant-form-inline {
      .ant-form-item {
        display: flex;
        margin-bottom: 24px;
        margin-right: 0;

        .ant-form-item-control-wrapper {
          flex: 1 1;
          display: inline-block;
          vertical-align: middle;
        }

        > .ant-form-item-label {
          line-height: 32px;
          padding-right: 8px;
          width: auto;
        }
        .ant-form-item-control {
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
  .main-container {
    background-color: #ffffff;
    padding: 8px;
    .btn-container {
      margin-bottom: 8px;
      button {
        margin-right: 8px;
      }
    }
  }
}
</style>